<template>
  <el-menu
    ref="menuRef"
    :default-active="activeMenu"
    :collapse="isCollapse && mode === 'vertical'"
    :unique-opened="true"
    :collapse-transition="false"
    :router="false"
    :mode="mode"
  >
    <MenuItem v-for="route in menuList" :key="route.path" :item="route" :base-path="pathResolve(route.path, basePath)" />
  </el-menu>
</template>

<script lang="ts" name="LeftMenu" setup>
import type { MenuInstance } from 'element-plus'
import { pathResolve } from '@/utils/router'
import { RouteRecordRaw } from 'vue-router'
import { useAppStore, useSettingStore } from '@/stores'
import { LayoutTypeEnum } from '@/enums/LayoutTypeEnum'
const settingStore = useSettingStore()
const { layout } = storeToRefs(settingStore)
export interface AppMenuProps {
  menuList: Array<RouteRecordRaw> // 菜单路由列表
  basePath: string // 基础路径
}
defineProps<AppMenuProps>()
const appStore = useAppStore()
const menuRef = ref<MenuInstance>()
const currentRoute = useRoute()
const isCollapse = computed(() => appStore.isCollapse)
const mode = computed(() => (layout.value === LayoutTypeEnum.TRANSVERSE ? 'horizontal' : 'vertical'))

const activeMenu = computed(() => {
  const { meta, path } = unref(currentRoute)
  // 如果设置路径，侧边栏将高亮显示您设置的路径
  if (meta.activeMenu) {
    return meta.activeMenu as string
  }
  return path
})
</script>
